<template>
  <div class="comment">
    <van-field
      v-model="msg"
      rows="2"
      autosize
      label="评论"
      type="textarea"
      maxlength="50"
      show-word-limit
      placeholder="请输入评论"
    />
    <van-button type="primary" block @click="postComment">发表评论</van-button>
    <van-card :desc="item.content" v-for="item in comments" :key="item.id">
      <template #thumb>
        <div><van-icon name="smile-o" /></div>
        <p>Svip10{{ item.user_name }}</p>
      </template>
      <template #title>
        <van-rate v-model="value" readonly />
      </template>
      <template #price>
        <div>{{ item.add_time }}</div>
      </template>
    </van-card>
    <p @click="getMore" class="getmore">
      {{ (lodingText = getend ? "被掏空了" : "加载更多......") }}
    </p>
  </div>
</template>
<script>
import { Toast } from 'vant'
export default {
  props: ['id'],
  data: () => ({
    msg: '',
    value: 5,
    pageNo: 0,
    pageSize: 50,
    comments: [],
    getend: false,
    lodingText: '加载更多......'
  }),
  methods: {
    async getComments() {
      if (this.getend !== false) {
        Toast('别点了,没有啦 !')
        return
      }
      ++this.pageNo
      const res = await this.$http.getComments({ id: this.id, pageNo: this.pageNo, pageSize: this.pageSize })
      this.comments = this.comments.concat(res.data.message)
      this.getend = this.pageNo * this.pageSize > res.data.count
    },
    getMore() {
      this.getComments()
    },
    async postComment() {
      if (this.msg === '') {
        Toast('请输入内容')
      } else {
        const res = await this.$http.postComment({ id: this.id, content: this.msg })
        if (res.data.status === 0) {
          Toast(res.data.message)
          this.msg = ''
        }
      }
    }
  },
  created() {
    this.getComments()
  }
}
</script>
<style lang="scss">
.comment {
  .van-cell {
    border: 1px solid rgb(3, 170, 247);
    margin-bottom: 20px;
    .van-field__label {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .getmore {
    text-align: center;
    color: #666;
  }
  .van-card {
    .van-card__header {
      .van-card__thumb {
        margin-right: 20px;
        div {
          width: 40px;
          height: 40px;
          // border: 1px solid #000;
          // border-radius: 50%;
          text-align: center;
          line-height: 40px;
          margin-left: 20px;
          .van-icon {
            text-align: center;
            font-size: 40px;
            color: chocolate;
          }
        }
      }
    }
  }
}
</style>
